<template>
  <SnPopup
    mode="center"
    v-bind="$attrs"
    v-model="show"
    :round="16"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="set-password-modal">
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <u-icon
          name="close"
          size="20"
          color="#999"
          @click="closeModal"
          class="close-icon"
        ></u-icon>
      </view>
      <view class="instructions">
        <text>您尚未设置钱包安全密码，请先设置密码</text>
      </view>
      <view class="success-btns">
        <up-button text="取消" @click="closeModal" />
        <up-button type="primary" text="去设置" @click="modifyPassword" />
      </view>
    </view>
  </SnPopup>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits, watch } from "vue";
import SnPopup from "@/components/common/snPopup.vue";

const props = defineProps({
  title: {
    type: String,
    default: "温馨提示",
  },
});

// 打开弹窗
const show = ref(false);
const openModal = () => {
  show.value = true;
};

const closeModal = () => {
  show.value = false;
};

// 跳转到修改支付密码页面
const modifyPassword = () => {
  uni.navigateTo({
    url: "/pages/setPaymentPassword/setPaymentPassword",
  });
};

defineExpose({
  openModal,
  closeModal,
});
</script>

<style lang="scss" scoped>
.set-password-modal {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  .modal-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    position: relative;

    .modal-title {
      font-size: var(--font-size-md);
      font-weight: 600;
      padding-bottom: 40rpx;
    }
    .close-icon {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: 0;
    }
  }

  .instructions {
    color: #666;
    margin-bottom: 60rpx;
  }

  .success-btns {
    display: flex;
    gap: 30rpx;
    width: 80%;
  }
}
</style>
